<template>
  <div class="my-screen">
    <div class="screen">
      <div class="screen-info">
        <div class="screen-img" :style="thumbnailStyle"></div>
        <div class="screen-edit">
          <div class="screen-button">
            <div class="edit-wrap">
              <Button type="primary" class="edit"> 编辑 </Button>
            </div>
            <div class="main-button">
              <Popover placement="bottom">
                <span
                  class="button-span"
                  draggable="true"
                  @dragstart="onDragStart"
                  @dragend="onDragEnd"
                >
                  <Icon icon="ant-design:drag-outlined" />
                </span>
                <template #content> 移动 </template>
              </Popover>
              <Popover placement="bottom">
                <span class="button-span">
                  <Icon icon="ant-design:copy-twotone" />
                </span>
                <template #content> 复制 </template>
              </Popover>
              <Popover placement="bottom">
                <span class="button-span">
                  <Icon icon="ant-design:delete-twotone" />
                </span>
                <template #content> 删除 </template>
              </Popover>
            </div>
          </div>
          <div class="preview">
            <Popover placement="bottom">
              <Icon icon="ant-design:desktop-outlined" />
              <template #content> 预览 </template>
            </Popover>
          </div>
          <div class="public">
            <Popover placement="bottom">
              <Icon icon="ep:promotion" @click="doPublish" />
              <template #content> 发布 </template>
            </Popover>
          </div>
        </div>
      </div>
      <div class="screen-main">
        <div class="main-name">
          <Popover placement="topLeft">
            <div class="screen-name-input">
              <Icon icon="ant-design:edit-twotone" />
              <input v-model.trim="screenName" class="input" @blur="handleBlur" />
            </div>
            <template #content> {{ screen.name }} </template>
          </Popover>
          <div class="publish-info">
            <span class="publish-info-dot" :class="{ published: publishState.published }"></span>
            <span>{{ publishState.text }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="tsx" setup>
  import { computed, PropType, ref, toRefs, inject } from 'vue';
  import { Button, Popover } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { Project } from '/@/utils/datav/project';
  import { projectInjectionKey, projectListInjectionKey } from './config';

  const props = defineProps({
    screen: {
      type: Object as PropType<Project>,
      required: true,
    },
  });
  const pConfig = inject(projectInjectionKey);
  const plConfig = inject(projectListInjectionKey);

  const { id, name, groupId, share } = toRefs(props.screen);
  const screenName = ref(name.value);
  const oldScreenName = ref(name.value);
  const publishState = computed(() => {
    const published = !!share.value;
    return {
      published,
      text: published ? '已发布' : '未发布',
    };
  });
  /**
   * 大屏缩略图样式
   */
  const thumbnailStyle = computed(() => {
    // if (thumbnail.value) {
    //   return {
    //     'background-image': `url(${thumbnail.value})`,
    //   };
    // }
    return {
      'background-image': `url(${'/@/assets/images/new-project.png'})`,
      'background-size': '50%',
      'background-position': 'center center',
      'background-repeat': 'no-repeat',
      filter: 'grayscale(1)',
      opacity: 0.07,
    };
  });

  /**
   * 失去焦点修改大屏名称
   */
  const handleBlur = async () => {
    if (screenName.value) {
      try {
        name.value = screenName.value;
      } catch (error) {}
    } else {
      screenName.value = oldScreenName.value;
    }
  };
  const image = new Image();
  image.src = `/@/assets/images/drag-thumbnail.png`;
  /**
   * 开始拖拽
   */
  const onDragStart = (event: DragEvent) => {
    pConfig?.dragStart();
    const dt = event.dataTransfer;
    if (dt) {
      dt.effectAllowed = 'move';
      dt.setDragImage(image, 30, 30);
      dt.setData('text', `${id.value},${groupId.value}`);
    }
  };
  /**
   * 拖拽结束
   */
  const onDragEnd = () => {
    pConfig?.dragEnd();
  };
  /**
   * 发布
   */
  const doPublish = () => {
    plConfig?.publish(id.value);
  };
</script>
<style lang="less" scoped>
  .my-screen {
    margin: 16px 32px 16px 0;
  }

  .screen {
    display: flex;
    flex-direction: column;
    width: 258px;
    height: 184px;
    border: 1px solid var(--datav-border-color);
    transition: 0.2s;

    .screen-info {
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      .screen-img {
        width: inherit;
        height: 146px;
        background-size: 100% 100%;
        opacity: 0.6;
      }

      .screen-edit {
        position: absolute;
        opacity: 0;
        display: flex;
        width: 100%;
        height: 100%;
        pointer-events: none;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s;
        background: rgb(0 0 0 / 80%);

        .edit-wrap {
          .edit {
            min-width: 116px;
            padding: 0 30px;
            font-size: 16px;
          }
        }

        .main-button {
          display: flex;
          justify-content: space-around;
          font-size: 19px;
          padding-top: 15px;
          align-items: center;
          color: #fff;
        }

        .screen-button {
          text-align: center;

          .button-span {
            padding: 0 10px;
            white-space: nowrap;
            cursor: pointer;
            transition: color 0.2s;

            &:hover {
              color: var(--datav-main-hover-color);
            }
          }
        }

        .preview {
          position: absolute;
          top: 10px;
          right: 35px;
        }

        .public {
          position: absolute;
          top: 10px;
          right: 10px;
          color: #fff;
          cursor: pointer;
          transition: color 0.2s;
        }

        .preview,
        .public {
          color: #fff;
          cursor: pointer;
          transition: color 0.2s;

          &:hover {
            color: var(--datav-main-hover-color);
          }
        }
      }
    }

    &:hover {
      box-shadow: var(--datav-shadow);
      border: var(--datav-border-primary);

      .screen-info {
        .screen-edit {
          opacity: 1;
          pointer-events: all;
        }
      }
    }

    .screen-main {
      .main-name {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        position: relative;
        justify-content: space-between;
        color: #fff;
        background: var(--datav-bgcolor-2);
        padding: 0 10px;

        .screen-name-input {
          cursor: pointer;
          font-size: 14px;
          display: flex;
          align-items: center;
          flex: 1;

          .input {
            width: 120px;
            color: var(--datav-font-color);
            background: 0 0;
            padding: 0 5px;
            line-height: 28px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            border: 1px solid transparent;

            &:hover {
              color: #fff;
            }

            &:focus {
              background: var(--datav-bgcolor-2);
            }
          }
        }

        .publish-info {
          align-items: center;
          display: flex;
          color: var(--datav-font-color);

          .publish-info-dot {
            content: '';
            margin-right: 5px;
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 5px;
            background-color: #576369;

            &.published {
              background-color: var(--datav-main-color);
            }
          }
        }
      }
    }
  }
</style>
